{{extend './main.html'}}
{{block 'tologin'}}
    <style type="text/css">
        #box {
            background-color: rgba(0, 0, 0, 0.2);
            width: 300px;
            height: 360px;
            margin-top: 10px;
            overflow: hidden;
            padding: 0;
        }

        #box p {
            padding: 0 15px;
        }

        #lrc {
            margin-top: 130px;
            position: absolute;
            text-align: center;
            padding-top: 60px;
        }

        .gl {
            color: hotpink;
            background-color: red;
        }
    </style>
    <style>
        .bg-clip3{
            /*定义一个色块背景图，f方法移动它，linear-gradient线性渐变*/
            background-image: linear-gradient(
                    0deg,  /*色块角度*/
                    #00B4F2 20%,  /*蓝*/
                    #888 80%/*!*灰*!*/
            );
            background-size: 100% 900px;  /*这里参数固定，调大参数2色块变大*/
            -webkit-background-clip: text;  /*字体蒙版，还有图片的*/
            color:transparent;   /*字体填充透明色才能起到字体蒙版作用*/
            background-position: 100% 230px;  /*调大参数2色块往下*/
        }
        .bg-clip4{
            min-height:1600px; /*这里越大，配合上面参数2的100%会使蓝和灰色区域越多*/
            text-align: center;
        }
        #lrcCntainer{
            height:600px;
            overflow:hidden;
        }
        /*上面设置蓝色块距离.bg-clip3顶部230px高，色块都是以.bg-clip3形成的******/
        .bg-clip3 p{
            margin:0;
            padding:0;
        }
    </style>

<div class="container">
    <div class="page-header">
        <h1>首页--<small>我的音乐</small></h1>
    </div>
    <a href="/add" class="btn btn-success">添加音乐</a>
</div>
<div class="container">
    <div class="row" style="display: flex;">
        <div style="flex: 3; margin-right: 10px;">
            <table class="table table-striped table-hover">
                <thead>
                <th>编号</th>
                <th>歌曲标题</th>
                <th>时长</th>
                <th>歌手</th>
                <th>编辑</th>
                <th>删除</th>
                <th>播放</th>
                </thead>
                <tbody class="list_container" id="list_container">
                {{each results}}
                <tr>
                    <td>{{$value.musicId}}</td>
                    <td>{{$value.title}}</td>
                    <td>{{$value.time}}</td>
                    <td>{{$value.singer}}</td>
                    <td><a href="/editmusic?mid={{$value.mid}}">编辑</a></td>
                    <td><a class="del" href="javascript:" data-mid="{{$value.mid}}">删除</a></td>
                    <td><span style="cursor:pointer" src="{{$value.music_file}}" data-lrc="{{$value.lrc}}" class="glyphicon glyphicon-play-circle ply"></span></td>
                </tr>
                {{/each}}
                </tbody>
            </table>
        </div>
        <div style="flex: 2">
            <p>正在播放音乐:</p>
            <audio id="audio" autoplay src="" controls="controls">
            </audio>
            <div id="box" class="col-md-3" style='background-image:url("./img/lrc-bg.jpg")'>
                <!--下面整体是一个自制滚动歌词组件-->
                    <div id="lrcCntainer">
                        <!--下面个div一定要有border边框-->
                        <div class="bg-clip3" style="border: 1px solid;">
                            <div class="bg-clip4" >
                                <p>剪贴蒙版动画效果</p>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>

<div id="modal" style="position:absolute;z-index:100;top:0;left:0;bottom:0;right:0;background-color: #eee;">
    <div style="position: absolute;top:50%;left:50%;">
        <div style="width:200px;height:100px;margin-left:-100px;margin-top:-50px;background-color: #fff;padding: 20px;text-align: center;">
            <h6>是否删除</h6>
            <div>
                <button onclick="domore()" class="btn btn-danger">yes</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button onclick="$('#modal').hide()" class="btn btn-dark">no</button>
            </div>
        </div>
    </div>
</div>
<script>
    $('#modal').hide();
    var mid = '';
    $('.del').click(function () {
        mid = $(this).data('mid');
        $('#modal').show();
    });
    let domore = () => {

        $.ajax({
            url: '/del-music?mid=' + mid,
            type: 'GET',
            success: function (result, msg, xhr) {
                $('#modal').find('h6').text(result.msg).next().html('<button class="btn btn-success" onclick="delSucc()">ok</button>');
            }
        });
    };
    function delSucc() {
        window.history.go(0);
    }
    function getLrc(lrcStr) {
        var strArr = lrcStr.split('\n');
        var p = $('.bg-clip4').children('p').height();
        var introHeight = 0;
        var html = '', oldMargin = 0, startTime = 0;
        for (var i = 0; i < strArr.length; i++) {
            var results = strArr[i].match(/\[(\d){2}.(\d){2}.(\d){2}\]/g);
            var lrcRow = strArr[i].split(']')[1];
            if (results) {
                if (strArr[i].indexOf("00:00.00") < 0) {
                    var arri = results[0].match(/\d{2}/g);
                    var newMargin = arri.slice(1, 2 + 1).join('') - '';
                    if (arri[0] !== '00') {
                        newMargin += arri[0] * 60 * 100;
                    }
                    var margin = newMargin * 10 / 36 - oldMargin;
                    oldMargin = newMargin * 10 / 36 + p;
                    if (startTime === 0) {
                        startTime = newMargin * 10;
                        margin = 0;
                    }
                    ;
                    // console.log(margin);
                    html += `<p class="startvideo" style="margin-top:${margin}px;">${lrcRow}<span>${strArr[i].split(']')[0]}</span></p>`;
                } else {
                    html += `<p style="margin-bottom:10px;">${lrcRow}</p>`;
                    introHeight += p + 10;
                }
            }
        }
        var overHeight = 230;  //固定的蓝色块位置230-250
        overHeight = overHeight - introHeight;  //对应.bg-clip4margin-top
        $('.bg-clip4').html(html).css({"margin-top": overHeight + 'px'});
        startOut = setTimeout(function () {
            goStart(overHeight);
        }, startTime + 1000);
    }

    function goStart(j) {
        start = setInterval(function () {
            j -= 1;
            $('.bg-clip4').css({
                "marginTop": j + 'px'
            });
        }, 36);
    }

    var start, startOut;

    $('.glyphicon-play-circle').on('click', function (e) {
        num = 0
        $('#audio').attr('src', $(e.target).attr('src'));
        clearTimeout(startOut);
        clearInterval(start);
        var lrcArr=$(e.target).data('lrc').match(/(\d)*\.lrc$/i)
        if (lrcArr.length>0)
            $.ajax({
                type: 'GET',
                url: '/get-lrc',
                data: 'lrc='+lrcArr[0],
                success: function (data, msg) {
                    //歌词文件如果是GBK格式，要在后台转成UTF8，前台才能正常显示
                    if (data.code==='001')
                    getLrc(data.lrcStr);
                }
            });
    });
    var num = 0;
    $('#audio').on('pause',function () {
        clearTimeout(startOut);
        clearInterval(start);
        num = parseInt($('.bg-clip4').css("margin-top"));
    })
        .on('play',function () {
            if (num!==0) {
                goStart(num);
            }
        });
</script>
{{/block}}